<template>
    <div class="food-details">
        <!-- 图片 -->
        <div class="dianzi" style="height: 50px"></div>

        <div class="fanhui iconfont icon-fanhui" @click="jump" style="line-height: 50px; padding-left: 10px">&lt;</div>
        <div class="food-photo-img">
            <!-- <video :src="list.vu" controls v-if="list.vu"></video> -->
            <img :src="detailsofdishes.photo_path" />
        </div>
        <!-- 菜名 -->
        <div class="food-name">
            <p>{{ detailsofdishes.title }}</p>
        </div>
        <!-- 盒子 -->
        <div class="food-detail">
            <!-- 精品 -->
            <div class="boutique dian">精品</div>
            <div class="dian">·</div>
            <!-- 独家 -->
            <div class="exclusive dian">独家</div>
            <div class="dian">·</div>
            <!-- 浏览量 -->
            <div class="page-view dian">浏览{{ detailsofdishes.views_count_text }}</div>
            <div class="dian">·</div>
            <!-- 收藏量 -->
            <div class="collection">收藏{{ detailsofdishes.favo_counts }}</div>
        </div>
        <!-- 用户div -->
        <div class="user">
            <div class="user-left">
                <div class="user-head">
                    <img :src="detailsofdishes.user.avatar_medium" />
                    <div class="verified_image" v-if="detailsofdishes.user.verified_image">
                        <img :src="detailsofdishes.user.verified_image" />
                    </div>
                </div>
                <div class="user-name">
                    {{ detailsofdishes.user.nickname }}
                </div>
                <div class="user-grade">Lv.{{ detailsofdishes.user.lvl }}</div>
            </div>
            <div class="user-right" @click="guanzhu = !guanzhu" :class="{ active: guanzhu }">{{ guanzhu == false ? "关注" : "已关注" }}</div>
        </div>
        <!-- 发表文字 用户此刻想法 -->
        <div class="user-ideas">
            {{ detailsofdishes.cookstory }}
        </div>
        <!-- 时间 等级 -->
        <div class="time-grade">
            <div class="left-time" v-if="detailsofdishes.cook_time">
                <!-- 图片 -->
                <div>
                    <img :src="detailsofdishes.cook_time_image" />
                </div>
                <!-- 时间 -->
                <p>
                    {{ detailsofdishes.cook_time }}
                </p>
            </div>
            <div class="right-grade" v-if="detailsofdishes.cook_difficulty">
                <!-- 图片 -->
                <div>
                    <img :src="detailsofdishes.cook_difficulty_image" />
                </div>
                <!-- 等级 -->
                <p>
                    {{ detailsofdishes.cook_difficulty }}
                </p>
            </div>
        </div>
        <!-- 食材清单  ingredient食材 quantity量-->
        <div class="list-of-ingredients-box">
            <div class="list-of-ingredients-title">
                <div class="left">食材清单</div>
                <div class="right">加入采购清单</div>
            </div>
            <ul>
                <li class="list-of-ingredients" v-for="(ingredient, index) in detailsofdishes.major" :key="index">
                    <div class="ingredient">
                        <a :href="ingredient.tu">{{ ingredient.title }}</a>
                    </div>
                    <div class="quantity">
                        {{ ingredient.note }}
                    </div>
                </li>
            </ul>
        </div>
        <!-- 营养分析 trophic analysis -->
        <div class="trophic-analysis-box" v-if="detailsofdishes.nutrition_facts.length > 1">
            <div class="one">
                <div class="one-left">营养分析</div>
                <div class="one-right">
                    <a :href="detailsofdishes.nutrition_facts_url">查看详情</a>
                </div>
            </div>
            <div class="two">
                <!-- 饼图 -->
                <div class="pie"></div>
                <!-- 营养 -->
                <div class="pie-nutrition">
                    <ul>
                        <li v-for="nutrition in detailsofdishes.nutrition_facts" :key="nutrition.pie_chart_color">
                            <div class="nutrition">
                                <div class="dot" :style="{ background: nutrition.pie_chart_color }"></div>
                                <div class="name">{{ nutrition.nutrient }}</div>
                            </div>
                            <!-- <div class="nutrition-name">{{ nutrition.nutrient }}</div> -->
                            <div class="nutrition-quantity">{{ nutrition.amount }}</div>
                        </li>
                    </ul>
                </div>
                <div class="energy">
                    <p>{{ detailsofdishes.energy }}</p>
                    <p class="qianka">千卡</p>
                </div>
            </div>
            <!-- 冷知识 -->
            <div class="three">💡&nbsp;&nbsp;{{ detailsofdishes.nutrition_facts_hint_text }}</div>
        </div>
        <!-- 烹饪步骤 Cooking steps-->
        <div class="cooking-steps-one-box">
            <div>烹饪步骤</div>
            <div>点击图片进入烹饪模式</div>
        </div>
        <div class="cooking-steps-two-box">
            <ul>
                <li v-for="(steps, i) in detailsofdishes.cookstep" :key="i">
                    <div class="step">步骤{{ i + 1 }}/{{ detailsofdishes.cookstep.length }}</div>
                    <div class="step-img">
                        <img :src="steps.image" />
                    </div>
                    <div class="step-content">
                        {{ steps.content }}
                    </div>
                </li>
            </ul>
        </div>
        <!-- 发布时间 -->
        <div class="release_time">
            {{ detailsofdishes.release_time }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            guanzhu: false,
        };
    },
    props: {
        detailsofdishes: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    methods: {
        jump() {
            this.$router.go(-1);
        },
    },
};
</script>

<style lang="scss" scoped>
.food-details {
    background-color: black;

    .fanhui {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        font-size: 30px;
        color: white;
        background: rgba(0, 0, 0, 0.8);
    }
    .food-photo-img {
        width: 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .food-name {
        p {
            font-size: 20px;
            font-weight: 700;
            margin-top: 15px;
            padding-left: 10px;
            line-height: 25px;
            color: white;
        }
    }
    .food-detail {
        padding-left: 10px;
        display: flex;
        margin-top: 10px;
        font-size: 14px;
        color: gray;
        .dian {
            padding-right: 5px;
        }
    }
    .user {
        margin-top: 20px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        .user-left {
            display: flex;
            height: 50px;
            line-height: 50px;
            .user-head {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                // overflow: hidden;
                margin-top: 5px;
                position: relative;
                img {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                }
                .verified_image {
                    width: 15px;
                    height: 15px;
                    position: absolute;
                    bottom: 15px;
                    right: -3px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .user-name {
                font-size: 14px;
                padding-left: 10px;
                color: white;
            }
            .user-grade {
                padding-left: 5px;
                font-style: italic;
                font-weight: 700;
                color: rgb(255, 196, 0);
                font-size: 5px;
            }
        }
        .user-right {
            line-height: 25px;
            margin-top: 12px;
            width: 80px;
            height: 25px;
            border-radius: 20px;
            text-align: center;
            background-color: yellow;
            font-size: 14px;
            &.active {
                background: gray;
            }
        }
    }
    .user-ideas {
        margin-top: 20px;
        padding-left: 10px;
        line-height: 30px;
        font-size: 18px;
        color: white;
    }
    .time-grade {
        margin-top: 20px;
        display: flex;
        width: 100%;
        .left-time {
            width: 50%;
            display: flex;
            justify-content: center;
            div {
                width: 30px;
                height: 30px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                font-size: 20px;
                line-height: 30px;
                padding-left: 10px;
                color: white;
            }
        }
        .right-grade {
            width: 50%;
            display: flex;
            justify-content: center;
            div {
                width: 30px;
                height: 30px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                font-size: 20px;
                line-height: 30px;
                padding-left: 10px;
                color: white;
            }
        }
    }
    .list-of-ingredients-box {
        .list-of-ingredients-title {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding: 0 10px;
            .left {
                font-size: 18px;
                font-weight: 700;
                color: white;
            }
            .right {
                font-size: 14px;
                color: #0ae1c9;
            }
        }
        ul {
            .list-of-ingredients {
                display: flex;
                justify-content: space-between;
                padding: 0 10px;
                margin: 20px 0;
                .ingredient {
                    a {
                        color: #0ae1c9;
                        font-size: 18px;
                    }
                }
                .quantity {
                    font-size: 18px;
                    color: white;
                }
            }
        }
    }
    .trophic-analysis-box {
        width: 100%;
        margin-top: 20px;
        .one {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            .one-left {
                font-size: 18px;
                font-weight: 700;
                color: white;
            }
            .one-right {
                a {
                    font-size: 14px;
                    color: #0ae1c9;
                }
            }
        }
        .two {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
            // 饼图
            .pie {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #0ae1c9;
            }
            //营养成分
            .pie-nutrition {
                ul {
                    li {
                        display: flex;
                        justify-content: space-between;
                        padding-right: 50px;
                        margin-left: -30px;
                        border-right: 1px solid gray;
                        margin-top: 5px;
                        .nutrition {
                            display: flex;
                            .dot {
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                margin-right: 10px;
                            }
                            .name {
                                font-size: 12px;
                                color: gray;
                            }
                        }
                        .nutrition-quantity {
                            margin-left: 20px;
                            font-size: 14px;
                            color: white;
                        }
                    }
                }
            }
            .energy {
                text-align: center;
                line-height: 20px;
                p:nth-child(1) {
                    margin-top: 10px;
                    font-size: 18px;
                    font-weight: 700;
                    color: white;
                }
                p:nth-child(2) {
                    font-size: 13px;
                    color: gray;
                }
            }
        }
        .three {
            padding: 0 10px;
            font-size: 14px;
            text-align: left;
            margin-top: 15px;
            color: white;
        }
    }
    .cooking-steps-one-box {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-top: 20px;
        color: white;
        div:nth-child(1) {
            font-size: 18px;
            font-weight: 700;
        }
        div:nth-child(2) {
            font-size: 14px;
            color: #0ae1c9;
            display: none;
        }
    }
    .cooking-steps-two-box {
        margin-top: 20px;
        width: 100%;
        color: white;
        ul {
            padding: 0 10px;
            li {
                .step {
                    font-weight: 700;
                }
                .step-img {
                    margin-top: 15px;
                    width: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 15px;
                    }
                }
                .step-content {
                    line-height: 25px;
                    margin: 15px 0;
                }
            }
        }
    }
    .release_time {
        margin-top: 30px;
        padding-left: 10px;
        font-size: 14px;
        color: gray;
    }
}
</style>
